<template>
    <div class="ilogbox">
        <div class="fcname">
            <div><img src="/images/cb1.png"></div>
            <h2>{{carDetails.property}}</h2>
            <h3>{{carDetails.community}}</h3>
            <p>客服电话：{{carDetails.serviceTelephone}}</p>
        </div>
        <div class="code">
            <div class="time">{{time}}</div>
            <div class="codeBox">
                <p>{{carDetails.code}}</p>
                <div class="imgBox"><img src="/images/cb2.png"></div>
            </div>
        </div>
    </div>
</template>

<script>
import { reactive ,toRefs,onMounted} from 'vue'
import { useStore } from 'vuex'
import {getNowDate} from '@/utils/fn.js'
export default {
    setup() {
        const store = useStore()
        const state = reactive({
            time:getNowDate(),
            carDetails:''
        })

        onMounted(()=>{
            getNowTime()
            getCarDetail()
        })

        const getNowTime = ()=>{
            setTimeout(()=>{
                state.time = getNowDate()
                getNowTime()
            },1000)
        }

        const getCarDetail = ()=>{
            store.dispatch('get_car_detail',{
                carCode:store.state.carCode
            }).then(res =>{
                state.carDetails = res.data
            })
        }

        return {
            ...toRefs(state)
        }
    },
}
</script>


<style lang="scss" scoped>
    .ilogbox{
        display: flex;
        color: #ffffff;
        .fcname{
            flex: 1;
            padding: 16px 0 0 21px;
            h2{
                font-size: 40px;
                font-weight: normal;
                height: 44px;
                line-height: 44px;
                padding: 0;
                margin: 34px 0 0 0;
            }
            h3{
                height: 44px;
                line-height: 47px; 
                padding: 0;
                margin: 0;
                font-size: 34px;
                font-weight: normal;
            }
            p{
                font-size: 30px;
                color: #b5d0ff;
                height: 38px;
                line-height: 38px;
                margin: 23px 0 0 0;
            }
        }
        .code{
            padding: 16px 0 0 0;
            width: 305px;
            .time{
                font-size: 28px;
            }
            .codeBox{
                padding: 27px 37px 0 0;
                text-align: right;
                p{
                    font-size: 35px;
                    padding: 0;
                    margin: 0;
                }
                .imgBox{
                    display: inline-block;
                    height: 120px;
                    width: 120px;
                    background: #fff;
                    border-radius: 20px;
                    overflow: hidden;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
    }
</style>